<template>
    <!-- init="false" 解决水合问题 -->
    <div class="banner-container">
        <swiper-container ref="containerEl" :init="false">
            <swiper-slide class="banner-item" v-for="item in data" :key="item">
                <img :src="item.cover" :alt="item.title">
            </swiper-slide>
        </swiper-container>
    </div>
</template>

<script setup>
defineProps({ data: Array })
const containerEl = ref(null)
const swiper = useSwiper(containerEl, { loop: true, autoplay: { delay: 5000 } })

onMounted(() => {
    // console.log(swiper.instance)
})
</script>

<style>
.banner-container {
    width: 450px;
    height: 400px;
    overflow: hidden;
}
</style>